<template>
    <div class="left-navicate">
        <div class="logo">
            <img :src="logo" class="logo-png">
        </div>
        <div v-for="level1 in pageList">
            <div :class="{ 'level1-label': true, 'selected': level1.selected }" @click="openLevel1(level1)">
                <div class="level1-icon">
                    <img :src="level1.icon" class="level1-icon-svg">
                </div>
                <div class="level1-name">{{ level1.name }}</div>
                <div class="level1-down-icon" v-if="!level1.isShow">
                    <img :src="downIcon" :class="{ 'down-icon': true, 'rotate': !level1.show }">
                </div>
            </div>
            <div v-if="level1.show" v-for="level2 in level1.children" @click="openLevel2(level2)">
                <div :class="{ 'level2-label': true, 'selected': level2.selected }">
                    <div class="level2-name">{{ level2.name }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import downIcon from '@/assets/down.svg'
import logo from '@/assets/logo.png'

const router = useRouter()
const route = useRoute()
let pageList = ref([])
const initPgaeList = () => {
    let list = []
    pageList.value = []
    let routes = router.getRoutes()
    routes.forEach(item => {
        if (item.meta && item.meta.usedPermission) {
            list = item.children
        }
    })
    for (let i = 0; i < list.length; i++) {
        const father = {
            name: list[i].name,
            path: list[i].path,
            icon: list[i].icon,
            isShow: list[i].meta.isShow,
            selected: route.path == list[i].path,
            show: false,
            children: []
        }
        for (let j = 0; j < list[i].children?.length; j++) {
            const child = {
                name: list[i].children[j].name,
                path: list[i].children[j].path,
                selected: route.path == list[i].children[j].path
            }
            father.children.push(child)
            if (child.selected) {
                father.show = true
            }
        }
        pageList.value.push(father)
    }
}
const openLevel1 = (level1) => {
    if (level1.isShow) {
        // 将pageList里的所有selected置为false
        pageList.value.forEach(item => {
            item.selected = false
            item.children.forEach(child => {
                child.selected = false
            })
        })
        level1.selected = true
        router.push(level1.path)
    } else {
        level1.show = !level1.show
    }
}
const openLevel2 = (level2) => {
    // 将pageList里的所有selected置为false
    pageList.value.forEach(item => {
        item.selected = false
        item.children.forEach(child => {
            child.selected = false
        })
    })
    level2.selected = true
    router.push(level2.path)
}
onMounted(() => {
    initPgaeList()
})
</script>

<style scoped>
.left-navicate {
    width: 100%;
    height: 100%;
    background: #fff;
}

.level1-label {
    line-height: 48px;
    height: 48px;
    width: 100%;
    border-bottom: 0.5px solid #eeeeee;
}

.level2-label {
    line-height: 48px;
    height: 48px;
    width: 100%;
    border-bottom: 0.5px solid #eeeeee;
}

.level2-name {
    margin-left: 40px;
    float: left;
}

.level1-icon {
    width: 40px;
    height: 48px;
    float: left;
}

.level1-icon-svg {
    width: 16px;
    height: 16px;
    margin: 16px 8px 16px 16px;
}

.level1-name {
    float: left;
}

.down-icon {
    float: right;
    width: 16px;
    height: 16px;
    margin-top: 16px;
    margin-right: 16px;
    transition: all 0.1s ease-in-out;
}

.rotate {
    transform: rotate(180deg);
}

.selected {
    color: #18A058FF;
    background: #e8f6f3;
}
.logo-png {
    width: calc(100% - 24px);
    margin: 12px;
}
</style>